{% load custom_tags %}
<div {% if component.id %} user-id="{{ component.assignee }}" component-id="{{ component.id }}"{% endif %} component-type="{{ component.type }}" class="componentItem sort-handle list-group-item reportComponent">
  <div style="text-align: center; width: 2rem; padding: .2rem">
    <i class="{{ component.iconType }}" style="color: {{ component.iconColor }}"></i>
  </div>
  <div class='component-name'>{% if component.todoItems %}{% include 'widgets/tooltipTodo.html' with component_id=component.id component_name=component.name todo_items=component.todoItems %} {% endif %}{{ component.name }}</div>
  {% if editControls %}
    <div class="componentEditControls">
      {% include 'snippets/smallButton.html' with name='Edit Component' type='pen' class='componentEdit text-dark' attrs='componentID='|addstr:component.id %}
    </div>
  {% endif %}
</div>
